<template>
  <div class="add-problem">
    <div class="add-problem__header">
      <div class="wrap w  flex-ac">
        <span class="title">暮客论坛</span>
        <span class="center">提问题</span>
        <button class="btn" @click="send">发布问题</button>
      </div>
    </div>
    <div class="wrapper w">
      <div class="add-problem__title">
        <el-input placeholder="请输入标签,用分号结尾" class="inner" v-model="title" />
      </div>
      <div class="add-problem__tags">
        <div class="left">
          <el-tag class="item" v-for="_ in 3">Tag 1</el-tag>
          <el-button type="default" class="tag-btn" :icon="Plus">添加标签</el-button>
        </div>
        <el-select v-model="tagTemplate" style="width: 180px;" placeholder="提问模板(可选)">
          <el-option v-for="item in 2" :key="item" :label="item" :value="item" />
        </el-select>
      </div>
      <div class="add-problem__content">
        <Editor ref="textContent" editorId="editor" v-model="textContent" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { ref } from 'vue';

const tagTemplate = ref();
const title = ref("")
const textContent = ref();

function send() {
  console.log(textContent.value.textContent);

}

</script>

<style lang="scss" scoped>
.add-problem {
  background-color: #e9ecef;
  height: 100vh;

  .wrapper {}

  &__header {

    background-color: #fff;

    .wrap {
      justify-content: space-between;
      padding: 10px 0;

      >button {
        background-color: $color;
      }

      >.title {
        font-weight: bold;
        font-size: 26px;
        color: $color;
      }

      >.center {
        font-size: 20px;
      }
    }


  }

  &__title {
    margin: 20px 0;

    .inner {
      font-size: 18px;
      height: 50px;
      border-radius: 6px;
    }
  }

  &__tags {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      gap: 10px;

      :deep(.item) {
        padding: 16px 20px;
        color: #fff;
        background-color: $color;
      }
    }

    :deep(.tag-btn) {
      background-color: transparent;
      border: 1px solid #ccc !important;

      &:hover,
      &:focus {
        background-color: transparent;
        color: #000;
        border: none;
      }
    }
  }

  &__content {
    width: 100%;
    height: 600px;
    margin-top: 40px;
  }

}
</style>